<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        body::-webkit-scrollbar {display:none}
        .new-group {
            background: url(/images/add.png) no-repeat 5px center;
            background-size: 18px 18px;
            padding-left: 30px;
        }
    </style>
</head>
<body>
<form id="form" class="layui-form layui-form-pane">
    <div style=" overflow-y:auto; overflow-x:auto; width:400px; height:300px;">
            <div class="layui-form-item ">
                <div id="groups" class="groups" th:each="chart:${charts}">
                    <label class="layui-form-label" style="text-align: left;width: 100%;border: 0" th:utext="${chart.getGroupname()}">默认收藏夹</label>
                </div>
            </div>

    </div>
    <div style="width:400px; height:100px;" align="center">
            <input id="new_btn" class="layui-btn layui-btn-primary layui-border-blue new-group" style="width: 350px;margin-top: 10px" type="button"  value="新建文件夹"   autocomplete="off"/><button id="new_group" onclick="add()" type="button" class="layui-btn layui-btn-primary layui-border-blue" style="width: 80px;padding:0;margin-top: 10px">新建</button>
           <!-- <input class="layui-input layui-input-inline" style="width: 270px"><button class="layui-btn layui-btn-primary layui-border-blue" style="width: 80px;padding:0px">新建</button>-->
        <button id="ok" style="width: 100px;margin-top: 10px" class="layui-btn layui-btn-radius layui-btn-normal">确 认</button>
    </div>
</form>
</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    var index = parent.layer.getFrameIndex(window.name);
    layui.use('form',function(){
        var form = layui.form;
        form.render();
    });
    layui.use('layer',function(){
        var layer=layui.layer;
    });
    var groupname="";

    $(".groups").on('click', 'label', function () {

        $("label").css("border","0");
        $("label i").empty();
        $(this).css("border","null");
        groupname=$(this).text();
        $(this).append('<i style="float: right" class="layui-icon">&#xe605;</i>');
    });
    $(function () {
        var flage=true;
        $("#new_group").hide();
        $("#new_btn").click(function () {
            var x=$(this);
            x.attr("class", " layui-input layui-input-inline").attr("type","input").removeAttr('value').attr("placeholder","最多输入20个字").css("width","270");
            if (flage){
                setTimeout(function () {
                    $("#new_group").show();
                    }, 100);

            }
            var xin=$("#new_btn");
            xin.focus();
            xin.blur(function (e) {
                    if (e.relatedTarget != null){
                        return false
                    }
                    xin.remove("class","layui-input");
                    xin.attr("class","layui-btn layui-btn-primary layui-border-blue new-group").attr("type","button").attr("value","新建文件夹").css("width","350px");
                    $("#new_group").hide();

            })
        })
    });

    function add() {
        var xin=$("#new_btn");
        var value=xin.val();
        if (value.length<2||value.length>20){
            layer.tips('2~20字', '#new_btn', {
                tips: 3
            });
            xin.focus();
        }else {
            console.log("sss")
           $("#groups").append('<label class="layui-form-label" style="text-align: left;width: 100%;border: 0">'+value+'</label>');
           xin.remove("class","layui-input");
           xin.attr("class","layui-btn layui-btn-primary layui-border-blue new-group").attr("type","button").attr("value","新建文件夹").css("width","350px")
           $("#new_group").hide();
        }
    }
    $("#ok").click(function () {

        if (groupname==''){
            layer.msg("请选择收藏夹",1)
        }else {
            var bauthor=[[${chart.getBauthor()}]];
            var aid=[[${chart.getAid()}]];
            var type=1;
            $.ajax({
                type:"POST",
                url:"/show/zan/"+bauthor+'/'+aid+'/'+type,
                data:{"groupname":groupname},
                async: false,
                success:function(data){
                    console.log(data)
                    if (data==1){
                        window.parent.location.reload();//刷新父页面
                        parent.layer.close(index);
                    }
                }
            });
        }
    })
</script>
</html>